<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理 - 权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #4361ee, #3f37c9);
        }

        .table-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .role-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .admin-role {
            background: linear-gradient(45deg, #4361ee, #4895ef);
        }

        .user-role {
            background: linear-gradient(45deg, #06d6a0, #48cae4);
        }

        .other-role {
            background: linear-gradient(45deg, #ff9e00, #ffea00);
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark gradient-bg shadow">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/">
            <i class="bi bi-shield-lock-fill me-2"></i>权限管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/">
                        <i class="bi bi-house-door me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/users">
                        <i class="bi bi-people me-1"></i>用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="${pageContext.request.contextPath}/roles">
                        <i class="bi bi-person-badge me-1"></i>角色管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容 -->
<div class="container my-5">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary">
            <i class="bi bi-person-badge me-2"></i>角色管理
        </h2>
        <span class="badge bg-primary fs-6">总角色数: ${roleCount}</span>
    </div>

    <!-- 角色列表 -->
    <div class="card table-card">
        <div class="card-header bg-white">
            <h5 class="card-title mb-0">
                <i class="bi bi-list-ul me-2 text-primary"></i>角色列表
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th class="ps-4">角色</th>
                        <th>角色名称</th>
                        <th>描述</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="role" items="${roles}">
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center">
                                    <div class="role-icon ${role.id == 1 ? 'admin-role' : (role.id == 2 ? 'user-role' : 'other-role')} me-3">
                                        <i class="bi bi-shield-check"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block">ID: ${role.id}</strong>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <h6 class="mb-1">${role.name}</h6>
                            </td>
                            <td>
                                <p class="text-muted mb-0">${not empty role.description ? role.description : '暂无描述'}</p>
                            </td>
                            <td>
                                <c:choose>
                                    <c:when test="${role.status == 0}">
                                        <span class="badge bg-success">启用</span>
                                    </c:when>
                                    <c:when test="${role.status == 1}">
                                        <span class="badge bg-danger">禁用</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span class="badge bg-secondary">未知</span>
                                    </c:otherwise>
                                </c:choose>
                            </td>
                            <td>
                                <small class="text-muted">${role.createTime}</small>
                            </td>
                            <td class="text-center">
                                <a href="${pageContext.request.contextPath}/roles?action=detail&roleId=${role.id}"
                                   class="btn btn-primary btn-sm">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 分页控件 -->
    <c:if test="${not empty currentPage}">
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                <c:if test="${currentPage > 1}">
                    <li class="page-item">
                        <a class="page-link" href="?page=${currentPage - 1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>

                <c:forEach begin="1" end="${totalPages}" var="i">
                    <li class="page-item ${i == currentPage ? 'active' : ''}">
                        <a class="page-link" href="?page=${i}">${i}</a>
                    </li>
                </c:forEach>

                <c:if test="${currentPage < totalPages}">
                    <li class="page-item">
                        <a class="page-link" href="?page=${currentPage + 1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>
            </ul>
        </nav>
    </c:if>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>